<template>
 
  <ul class="ul-container" >
      <li class="list-children" v-for="(item,index) in list" :class="{all:item.name == '全部' }"   @click="selectItem(item.name)" >
         <span :class="{active:item.name == params }" >{{item.name}}</span> 
          <span class="number"> {{item.sum ?` ${item.sum}`: ""  }} </span>
          <!-- <RightList :list="item.children" @selectType="selectItem(name)" ></RightList> -->
      </li>
       
  </ul>
</template>

<script>
import {ref,watch} from 'vue';
import {useRoute,useRouter} from "vue-router"
export default {
    name:"RightList",
    props:{
        list:{
            type:Array,
            default:[]
        }
    },

    setup(pros,cxt){
   const route = useRoute();
   const router = useRouter();
   const params = ref(route.params.type);
    watch(()=>route.params,(par)=>{
        params.value = par.type;
    })


    const selectItem = (name)=>{
        params.value = name;
        cxt.emit("selectType",name);

    }


    return{
        params,
        selectItem
    }
    }
}
</script>

<style lang="less" scoped>
ul{
    list-style: none;
    padding: 0 0 0 15px;
    margin: 0;
    width: 250px;
    height: 100%;
    overflow-x: hidden;

    font-size: 18px;
    li{
        cursor: pointer;
        min-height: 40px;
        line-height: 40px;

        display: flex;
        justify-content: space-between;
        f
       .list-children{
           margin: 1rem;
       }
     .number{
         font-size: 15px;
         color: #888;
         margin-right:20px ;
     }
        &:hover{
            color: #2479cc;
        }
    }

}
.active{
    font-weight: 700;
     color: #2479cc;
}
//  .all{
//     height: 40px;
//     text-align: center;
    
//     font-size: 18px;
//     padding: 10px;
//   }

</style> 